<template>
  <div class="test-stylus">
    <h1>Stylus 测试页面</h1>
    <div class="card">
      <p class="text">如果你能看到颜色和样式，说明 Stylus 配置成功！</p>
      <button class="btn">测试按钮</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestStylus'
}
</script>

<style lang="stylus" scoped>
// Stylus 变量定义
$primary-color = #409eff
$success-color = #67c23a
$border-radius = 8px

.test-stylus
  padding 20px
  background #f5f5f5
  min-height 100vh

  h1
    color $primary-color
    font-size 32px
    margin-bottom 20px
    text-align center

  .card
    background white
    padding 30px
    border-radius $border-radius
    box-shadow 0 2px 12px rgba(0, 0, 0, 0.1)
    max-width 600px
    margin 0 auto

    .text
      color #333
      font-size 18px
      line-height 1.6
      margin-bottom 20px

    .btn
      background $success-color
      color white
      border none
      padding 12px 24px
      border-radius 4px
      cursor pointer
      font-size 16px
      transition all 0.3s

      &:hover
        background darken($success-color, 10%)
        transform translateY(-2px)
        box-shadow 0 4px 8px rgba(0, 0, 0, 0.2)
</style>
